<template>
  <!--
     el-form组件:
          label-width="80px",设置表单域label宽度的,将来表单域form-item都可以继承
    --->
  <el-form
    ref="form"
    label-width="80px"
    :inline="false"
    size="normal"
    :model="spuInfo"
  >
    <el-form-item label="SPU名称">
      <el-input
        prefix-icon="el-icon-magic-stick"
        v-model="spuInfo.spuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="品牌" size="normal">
      <el-select placeholder="请你选择品牌" v-model="spuInfo.tmId">
        <el-option
          :label="trademark.tmName"
          :value="trademark.id"
          v-for="(trademark, index) in tmArr"
          :key="trademark.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述" size="normal">
      <el-input
        type="textarea"
        placeholder="请你描述"
        size="normal"
        v-model="spuInfo.description"
      ></el-input>
    </el-form-item>
    <el-form-item label="SPU图片" size="normal">
      <!--
          el-upload:
                ---action:上传图片的地址   请求地址前面需要加上dev-api,否则代理服务器不工作
                ---file-list:照片墙展示数据的属性,照片墙的数据[{name:'xxx',url:'xxx'}]
                ---on-preview：预览事件的钩子
                --on-remove:删除图片的钩子
                --on-success:图片上传成功钩子
       -->
      <el-upload
        action="/dev-api/admin/product/fileUpload"
        list-type="picture-card"
        :file-list="imgArr"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
      >
        <i class="el-icon-upload"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <!-- 销售属性:SPU类最多拥有三个销售属性 颜色 版本 尺码 -->
    <el-form-item label="销售属性" size="normal">
      <el-select
        :placeholder="
          unSaleAttr.length > 0
            ? `还未选择的属性${unSaleAttr.length}个`
            : '没了'
        "
        v-model="saleAttrIdAndName"
      >
        <el-option
          :label="unSale.name"
          :value="`${unSale.id}:${unSale.name}`"
          v-for="(unSale, index) in unSaleAttr"
          :key="unSale.id"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        :disabled="saleAttrIdAndName ? false : true"
        size="default"
        icon="el-icon-plus"
        style="margin: 0px 5px"
        @click="addSaleAttr"
        >添加销售属性</el-button
      >
      <el-table
        border
        stripe
        style="margin: 10px 0px"
        :data="spuInfo.spuSaleAttrList"
      >
        <el-table-column type="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column prop="saleAttrName" label="属性名称" width="80px">
        </el-table-column>
        <el-table-column label="属性值" width>
          <template slot-scope="{ row, $index }">
            <!-- 利用tag标签将属性值展示出来  el-tag close:即为叉子点击事件-->
            <el-tag
              v-for="(item, index) in row.spuSaleAttrValueList"
              :key="item.id"
              closable
              style="margin: 0px 5px"
              @close="row.spuSaleAttrValueList.splice(index, 1)"
              >{{ item.saleAttrValueName }}</el-tag
            >
            <!-- 编辑模式与查看模式切换:el-button|el-input -->
            <el-input
              class="input-new-tag"
              v-if="row.show"
              v-model="row.inputValue"
              :ref="$index"
              size="small"
              @blur="toLook(row)"
              @keydown.native.enter="toLook(row)"
            />
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="toEdit(row, $index)"
              >添加属性值</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="{ row, $index }">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="spuInfo.spuSaleAttrList.splice($index, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" icon="el-icon-view" @click="save"
        >保存</el-button
      >
      <el-button size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //收集销售属性名字与ID[未选择的]
      saleAttrIdAndName: "",
      //存储图片的地址
      dialogImageUrl: "",
      //对话框显示与隐藏的控制
      dialogVisible: false,
      //存储已有SPU基本信息
      //修改SPU:下面属性,起始值是一个空对象,修改SPU的时候，父组件通知子组件发四个请求,子组件获取已有SPU数据进行替换
      //对于修改SPU收集的参数,实质是收集到服务器返回的这个对象身上！！
      spuInfo: {
        category3Id: "", //三级分类的ID
        spuName: "", //类的名字
        tmId: "", //收集品牌的数据
        description: "", //SPU描述
        spuImageList: [
    
        ],
        spuSaleAttrList: [],
      },
      //品牌的数据
      tmArr: [],
      //照片墙的数据
      imgArr: [],
      //全部销售属性
      allSaleAttr: [],
    };
  },
  methods: {
    //照片钱删除图片的回调
    handleRemove(file, fileList) {
      //file:删除那张图片的信息
      //fileList:删除已有剩余的图片
      //照片的图片删除的时候,需要收集剩余图片的信息
      this.imgArr = fileList;
    },
    //照片墙预览的事件回调
    handlePictureCardPreview(file) {
      //file:file是人家注入的参数,当前预览图片的信息【图片名字、地址】
      //存储图片地址
      this.dialogImageUrl = file.url;
      //将对话框展示出来
      this.dialogVisible = true;
    },
    //照片钱上传图片成功的回调
    handleSuccess(response, file, fileList) {
      //response:图片上传成功服务器返回数据---包含上传成功图片地址
      //file:上传成功的这张图片的信息，图片名字、图片大写等等
      //fileList:照片墙上传图片成功以后，全部图片的信息
      //目前照片墙收集图片数据{name:'xxx',url:'xxxx'}！这不是服务器需要K -{imageName:'xxx',imgUrl:'xxxx'}
      this.imgArr = fileList;
    },
    //保存按钮的回调
    async save() {
      //整理参数  将照片墙收集收据 imgArr整理完毕赋值给Spuinfo即可
      this.spuInfo.spuImageList = this.imgArr.map((item) => {
        return {
          imgName: item.name,
          imgUrl: (item.response && item.response.data) || item.url, //已有图片地址url,新增的图片用的response里面data远程地址
        };
      });
      //发请求:修改SPU
      try {
        //添加或者修改SPU成功
        await this.$ajax.spu.reqAddOrUpdateSpu(this.spuInfo);
        //提示信息
        this.$message({
          type: "success",
          message: this.spuInfo.id ? "修改成功" : "添加成功",
        });
        //如果是修改需要通知父组件 留在当前页   如果是添加  通知父亲留在第一页
        //修改
        if(this.spuInfo.id){
           this.$emit('changeScene',{scene:0,flag:'update'});
        }else{
          //添加
          this.$emit('changeScene',{scene:0,flag:'add'});
        }
      } catch (error) {
        this.$message({
          type: "warning",
          message: this.spuInfo.id ? "修改失败" : "添加失败",
        });
      }
      //发请求,修改已有SPU请求
      //成功干什么
      //失败干什么
    },
    //取消按钮的回调
    cancel() {
      //通知父组件切换场景为0
      this.$emit("changeScene",{scene:0,flag:''});
    },
    //修改SPU(类),获取相应的数据，发四个请求
    //spu:父组件传递过来的已有类的信息(包含已有的SPU的ID)

    //父组件调用子组件的方法,获取已有SPU基本信息【SPU基本信息、品牌信息、照片墙的信息】
    async initSpuData(spu) {
      //清空数据
      this.reset();
      //获取已有SPU基本信息
      let ps1 = this.$ajax.spu.reqFetchSpuInfo(spu.id);
      //获取品牌的数据
      let ps2 = this.$ajax.spu.reqFetchTradeMark();
      //获取当前已有类SPU照片墙的数据
      let ps3 = this.$ajax.spu.reqSpuImageList(spu.id);
      //获取项目中全部销售属性
      let ps4 = this.$ajax.spu.reqAllSaleAttr();
      //获取全部的数据:前台项目购物车就用过
      let result = await Promise.all([ps1, ps2, ps3, ps4]);

      //存储SPU基本数据：数据替换,替换为服务器返回的数据
      this.spuInfo = result[0].data;
      //存储品牌的数据
      this.tmArr = result[1].data;
      //存储已有SPU照片墙的数据
      this.imgArr = result[2].data;
      //由于照片墙数据要求:当服务器的数据返回以后修改一下数据
      this.imgArr = this.imgArr.map((item) => {
        return {
          name: item.imgName,
          url: item.imgUrl,
        };
      });
      //存储全部的销售属性
      this.allSaleAttr = result[3].data;
    },

    //添加属性按钮回调
    addSaleAttr() {
      //整理新增的销售属性  '3:尺码'
      const [id, name] = this.saleAttrIdAndName.split(":");
      //整理人家服务器需要参数格式
      let newSale = {
        baseSaleAttrId: id, //属性的ID
        saleAttrName: name, //属性名字
        spuSaleAttrValueList: [], //属性值,因为新增的没有属性值
      };
      //在已有的属性基础之上新增一个属性，将来还需要带给服务器的参数
      this.spuInfo.spuSaleAttrList.push(newSale);
      //清空saleAttrIdAndName数据
      this.saleAttrIdAndName = "";
    },
    //el-button回调：点击变为编辑模式[展示input]
    toEdit(saleAttr,$index) {
      //点击按钮的时候,给每一个销售属性打一个标记
      //给响应式 对象 添加 动态响应式属性 :$set
      //saleAttr.show = true; 给响应式对象添加属性  并非响应式的
      this.$set(saleAttr, "show", true); //响应式对象追加响应式属性

      //之家动态属性，用于收集表单元素里面的属性值
      this.$set(saleAttr, "inputValue", "");

      //获取el-input组件聚焦
      this.$nextTick(()=>{
         this.$refs[$index].focus();
      })
    },
    //查看模式
    toLook(saleAttr) {
      //收集表单数据内筒为空的不行
      if (saleAttr.inputValue.trim() == "") {
        this.$message({ type: "warning", message: "亲爱的属性值不能为空的" });
        return;
      }

      //是否有重名的
      let repeat = saleAttr.spuSaleAttrValueList.find((item) => {
        //新增的属性值与已有属性值判断，是否有重复的
        return item.saleAttrValueName == saleAttr.inputValue;
      });

      if (repeat) {
        this.$message({ type: "warning", message: "亲属性值不能重复" });
        return;
      }

      //整理 属性值 参数
      let saleAttrValue = {
        baseSaleAttrId: saleAttr.baseSaleAttrId, //收集的是属性的ID
        saleAttrValueName: saleAttr.inputValue, //收集的是表单元素里面属性值
      };
      //属性值  数组追加新的属性
      saleAttr.spuSaleAttrValueList.push(saleAttrValue);
      //变为查看模式
      saleAttr.show = false;
    },

    //点击添加SPU按钮的时候,当前子组件发两个请求
    async addSpuRequest(c3Id){
      //清空数据，放置数据回显
      this.reset();
      //收集参数三级分类的ID，添加SPU是给哪一个三级分类添加的
      this.spuInfo.category3Id = c3Id;
      //获取品牌的数据
      let ps1 = this.$ajax.spu.reqFetchTradeMark();
      //获取项目中全部销售属性
      let ps2 = this.$ajax.spu.reqAllSaleAttr();
      let result = await Promise.all([ps1,ps2]);
      //存储品牌的数据
      this.tmArr = result[0].data;
      //存储全部的销售属性
      this.allSaleAttr = result[1].data;
    }
    ,
    //清空数据
    reset(){
      this.saleAttrIdAndName = '';
      this.dialogImageUrl = '';
      this.dialogVisible = false;
      this.spuInfo =  {
        category3Id: "", //三级分类的ID
        spuName: "", //类的名字
        tmId: "", //收集品牌的数据
        description: "", //SPU描述
        spuImageList: [
    
        ],
        spuSaleAttrList: [],
      };
      this.tmArr = [];
      this.imgArr = [];
      this.allSaleAttr = [];
    }
  },
  //计算属性
  computed: {
    //计算出某一个已有的SPU,还没有销售属性
    unSaleAttr() {
      //从全部的销售属性数组进行过滤
      //['版本','尺码','颜色']
      let result = this.allSaleAttr.filter((item) => {
        //['颜色']
        return this.spuInfo.spuSaleAttrList.every((item1) => {
          return item.name != item1.saleAttrName;
        });
      });
      //筛选出还没有选择的销售属性
      return result;
    },
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>